Skip to content

🎨 Color Modes #1131

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom
Merged
merged 376 commits into from
Mar 10, 2021
Merged

🎨 Color Modes #1131

merged 376 commits into from
Mar 10, 2021

Conversation

@BinaryMuse
Copy link
Contributor

@BinaryMuse BinaryMuse commented Jul 30, 2020 •
edited by simurai
Loading

This PR goes hand-in-hand with primer/primitives#18 to introduce color modes to Primer. This PR is extremely WIP.

TODO

  • Setup primer/primitives
  • Migrate components (except for /marketing)
  • Migrate SASS variables
  • Migrate utilities classes
  • Fix stylelint. Currently var(--color-text-primary) shows as invalid. Update stylelint config to support CSS variables #1176
  • Test on dotcom (to make this PR work on dotcom we first have to remove all darken/lighten color functions from dotcom)
  • Alias btn-blue to btn-primary
  • Add color-scheme: dark light to each mode to support "native" elements, see this article
  • Fix docs (the color tables are currently just commented out)
  • Alias presentational to functional variables -> $text-gray-dark: var(--color-text-primary);
  • Decide if functional utility classes should be prefixed with color-
  • Move link utilities to a Link component
  • Add color-text-white. This is the only "immutable" color. It stays "white" in all modes.
  • Use and document "overlay" colors
  • Implement components from Figma
  • Figure out what to do with marketing styles. There are a few rgba() that would need to be converted.
  • Make sure @primer/css-next works everywhere on dotcom. Use @primer/css-legacy for CSS bundles that can't use @primer/css-next.
  • Setup changesets so that making releases is less tedious Use changesets for Primer CSS #1224

API changes

  • Remove btn-solid(), btn-inverse(), btn-outline() mixins
  • Remove dropdown-menu-dark
  • Alias btn-blue to btn-primary
  • Add lots of new "functional" utility classes, see migration guide
  1. Add new colors -> Add support for multiple color modes primitives#18
  2. Use new colors -> 🎨 Color Modes #1131 (this PR)
  3. Toggle new colors -> https://github.com/github/github/pull/155266

@vercel
Copy link

vercel bot commented Jul 30, 2020 •
edited
Loading

This pull request is being automatically deployed with Vercel (learn more).
To see the status of your deployment, click below or on the icon next to each commit.

🔍 Inspect: https://vercel.com/primer/primer-css/9rfgnKgoA48rZAGSxy168TBQ7JDz
✅ Preview: https://primer-css-git-mkt-color-modes-whee-primer.vercel.app

@BinaryMuse BinaryMuse self-assigned this Jul 30, 2020
@simurai simurai changed the base branch from master to color-modes August 3, 2020 00:56
@simurai
Copy link
Contributor

simurai commented Aug 3, 2020

Created #1134 and changed this PRs's base to it. Once this PR is ready, we can merge it and start testing in parallel with the @primer/css-next npm package. Similar to the Component Refresh.

@simurai simurai mentioned this pull request Aug 3, 2020
Closed
@BinaryMuse BinaryMuse force-pushed the mkt/color-modes-whee branch from 7769784 to d0457ba Compare August 10, 2020 17:51
BinaryMuse
BinaryMuse commented Aug 10, 2020
View reviewed changes
src/core/index.scss
Comment on lines +14 to +15
// Color modes

Copy link
Contributor Author

@BinaryMuse BinaryMuse Aug 10, 2020

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

🔥

@vercel vercel bot temporarily deployed to Preview September 9, 2020 20:41 Inactive
@BinaryMuse
Copy link
Contributor Author

BinaryMuse commented Sep 9, 2020

@simurai I changed the name of the package in this PR to @primer/css-next (since we already have a package with that name on npm — let me know if we need to change this) and I removed the lint step which was causing the build to fail. I also updated this PR to use the latest version of @primer/primitives from primer/primitives#18.

Please feel free to push any commits you need to the Primer Primitives PR; if you do you can use the version number in the GitHub checks to update this PR's package.json.

@simurai simurai mentioned this pull request Sep 10, 2020
Closed
@simurai simurai changed the base branch from color-modes to master September 10, 2020 11:41
@simurai
Copy link
Contributor

simurai commented Sep 10, 2020

I switched the base branch back to master, so publish @primer/css is somehow blocked, but I think that fine. We'll change the name back. Publishing to npm should still work.

@vercel vercel bot temporarily deployed to Preview September 11, 2020 08:04 Inactive
@vercel vercel bot temporarily deployed to Preview September 15, 2020 04:12 Inactive
@vercel vercel bot temporarily deployed to Preview September 15, 2020 10:18 Inactive
@vercel vercel bot temporarily deployed to Preview September 16, 2020 14:38 Inactive
@vercel vercel bot temporarily deployed to Preview September 17, 2020 08:17 Inactive
@vercel vercel bot temporarily deployed to Preview September 17, 2020 08:22 Inactive
@vercel vercel bot temporarily deployed to Preview March 8, 2021 19:22 Inactive
@vercel vercel bot temporarily deployed to Preview March 9, 2021 06:30 Inactive
@vercel vercel bot temporarily deployed to Preview March 9, 2021 07:07 Inactive
@simurai simurai marked this pull request as ready for review March 10, 2021 12:52
@simurai simurai changed the base branch from master to release-16.0.0 March 10, 2021 12:52
@vercel vercel bot temporarily deployed to Preview March 10, 2021 12:54 Inactive
@simurai simurai merged commit bbd0cb6 into release-16.0.0 Mar 10, 2021
@simurai simurai deleted the mkt/color-modes-whee branch March 10, 2021 13:16
@tonimelisma
Copy link

tonimelisma commented Mar 10, 2021

Hey @simurai so I get it that automatic dark mode detection is coming to release 16.0 of primer, is that correct?

@simurai simurai mentioned this pull request Mar 11, 2021
Merged
16 tasks
@simurai
Copy link
Contributor

simurai commented Mar 12, 2021

@tonimelisma so I get it that automatic dark mode detection is coming to release 16.0 of primer, is that correct?

Yes, although this reminds me we still have to document it. You can add these data- attributes to <html> to configure how the auto mode should work. Currently there are these 3 themes: light, dark, dark_dimmed.

So an example would be:

<html data-color-mode="auto" data-light-theme="light" data-dark-theme="dark_dimmed">

@bartkamphorst bartkamphorst mentioned this pull request Mar 13, 2021
Open
8 tasks
@github-actions github-actions bot mentioned this pull request Mar 26, 2021
Merged
@github-actions github-actions bot mentioned this pull request Nov 28, 2022
Open
This was referenced Dec 17, 2022
Open
Open
Open
This was referenced Jan 1, 2023
Open
Open
Open
@github-actions github-actions bot mentioned this pull request Jan 11, 2023
Open
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Reviewers

1 more reviewer

@ornobetarek1 ornobetarek1 ornobetarek1 approved these changes

Reviewers whose approvals may not affect merge requirements

Assignees

@BinaryMuse BinaryMuse

Labels

effort: high impact: high status: wip Tag: Breaking Change type: enhancement

Projects

None yet

Milestone

No milestone

Development

Successfully merging this pull request may close these issues.

10 participants

@BinaryMuse @simurai @heynan0 @tonimelisma @ornobetarek1 @auareyou @colebemis @koddsson @jonrohan